<template>
    <div class="home">
        <div class="header">
            <div class="type-wrap" @click="changeType">
                <span class="title">{{ currentType.name || '全部类型' }}</span>
                <van-icon name="qr" size="20" />
            </div>
            <div class="data-wrap">
                <span class="time" @click="changeTime">{{ currentDate[0] }}年{{ currentDate[1] }}月<van-icon class="arrow"
                        name="play" /></span>
                <span class="expense">总支出{{ bill.totalExpense }}</span>
                <span class="income">总收入{{ bill.totalIncome }}</span>
            </div>
        </div>
        <div class="content">
            <van-pull-refresh class="refresh" v-model="refreshLoading" @refresh="onRefresh">
                <van-list class="list" :finished="finished" finished-text="没有更多了" v-model:loading="loadingMore"
                    @load="onLoad" offset="0">
                    <cardItem class="card-item" v-for="(item, index) in bill.list" :key="index" :billItem="item">
                    </cardItem>
                </van-list>
            </van-pull-refresh>
        </div>
        <div class="save" @click="() => popAddref.show = true">
            <van-icon name="records-o" size="20" />
            <span>记一笔</span>
        </div>
    </div>
    <popType ref="popTypeRef" @handleType="selectType" />
    <popTime ref="popTimeRef" @handleTime="selelctTime" />
    <popAdd ref="popAddref" @refresh="onRefresh"/>
</template>

<script setup>
import popType from '@/components/popType.vue'
import popTime from '@/components/popTime.vue'
import popAdd from '@/components/popAdd.vue'
import { reactive, ref } from 'vue'
import formateDate from '@/utils/date.js'
import cardItem from '@/components/cardItem.vue'
import axios from '@/api'

//控制下拉刷新展示
const loading = ref(false);
const currentType = ref({})
//类型弹出框
const popTypeRef = ref(null)
const popAddref = ref(null)
const changeType = () => {
    popTypeRef.value.show = true
}
//账单列表
const bill = reactive({
  list: [],
  totalExpense: 0,
  totalIncome: 0,
  totalPage: 0
})
//选择类型
const selectType = async (type) => {
    currentType.value = type
    page.value = 1; // 重置页码
    bill.list = []; // 重置列表数据
    await getBillList()
    finished.value = false;
}
//时间弹出框
const popTimeRef = ref(null)
const currentDate = ref(formateDate(new Date()).slice(0,-1))
const changeTime = () => {
    popTimeRef.value.show = true

}
const selelctTime = async(time) => {
    currentDate.value = time
    page.value = 1; // 重置页码
    bill.list = []; // 重置列表数据
    await getBillList()
    finished.value = false;
}
//下拉刷新
const finished = ref(false); // 列表数据是否加载完毕
const refreshLoading = ref(false);

const onRefresh = async () => {
    page.value = 1;
  bill.list = [];
  refreshLoading.value = true;
  getBillList().then(() => {
    refreshLoading.value = false;
})
}

//上拉加载
const page = ref(1);
const loadingMore = ref(false);


const onLoad = async() => {
  await getBillList()
  // console.log('onLoad', page.value, bill.totalPage);
  if (page.value > bill.totalPage) { // 已经拿完了所有数据
    finished.value = true;
  }
  loadingMore.value = false;
}



const getBillList = async () => {


    const { data } = await axios.get(`/api/bill/list?date=${currentDate.value.join('-')}&type_id=${currentType.value.id || 'all'}&page=${page.value}&size=5`)
    bill.list = bill.list.concat(data.list);
    bill.totalExpense = data.totalExpense;
    bill.totalIncome = data.totalIncome;
    bill.totalPage = data.totalPage;
    page.value++
}
</script>

<style lang="less" scoped>
.home {

    .header {
        background-color: rgb(55, 167, 98);
        height: 80px;
        padding: 20px 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        font-size: 16px;
        color: #fff;

        .type-wrap {
            background-color: rgb(70, 177, 113);
            padding: 10px;
            border-radius: 4px;
            display: flex;
            align-items: center;

            .title {
                padding-right: 10px;
                margin-right: 10px;
                border-right: 1px solid #5ec488;
            }
        }

        .data-wrap {
            margin-top: 10px;
            font-size: 14px;

            .time {
                margin-right: 10px;

                .arrow {
                    transform: rotate(90deg);
                }
            }

            .expense {
                margin-right: 10px;
            }
        }
    }

    .content {
        height: calc(100vh - 170px);
        overflow-y: scroll;
        padding: 10px;
        background-color: rgb(232, 232, 232);

        .card-item {
            margin-top: 10px;
            border-radius: 10px;
            overflow: hidden;

        }

        .card-item:first-child {
            margin-top: 0;
        }
    }

    .save {
        position: fixed;
        width: 80px;
        height: 40px;
        bottom: 80px;
        right: 20px;


        border-radius: 100px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        color: #37a762;
        display: flex;
        justify-content: center;
        align-items: center;


    }
}
</style>